import { Button, message, Modal } from "antd";
import { connect } from "react-redux"
import {createGoodsRemove, createGoodsIncrement, createGoodsDecrement} from "../../redux/action/cart"
import "./index.scss"
import CartItem from "../../component/cartItem";
import { useEffect, useState } from "react";

function Cart(props) {

    let [deleteModalVisible,updateDeleteModalVisible] = useState(false)

    let [currentId, updateCurrentId] = useState(null)

    let timer,startTime,endTime
    
    const getNowTime = () => {
        let date = new Date()
        return date.getTime()
    }

    const handleMouseDown = (id) => {
        startTime = getNowTime()
        timer = setInterval(() => {
            endTime = getNowTime()
            if(endTime - startTime > 500){
                clearInterval(timer)
                updateCurrentId(id)
                updateDeleteModalVisible(true)
            }
        },100)
    }

    const handleMouseUp = () => {
        
        clearInterval(timer)
    }

    // 删除
    const handleDelete = () => {
        props.remove(currentId)
        updateDeleteModalVisible(false)
    }

    // 增加
    const handleAdd = (item) => {
        props.add({goods:item,count:1})
    }

    // 减少
    const handleReduce = (id) => {
        props.reduce(id)
    }

    // 页面关闭前保存数据
    window.addEventListener("beforeunload",() => {
        localStorage.setItem("cart", JSON.stringify(props.cart))
      })

    return <div>
        {
            props.cart.length > 0
                ?
                <div>
                    <h5 className="title">购物车</h5>
                    <ul>
                        {props.cart.map(item => {
                            return <li 
                            key={item.id}
                            onMouseDown={handleMouseDown}
                            onMouseUp={handleMouseUp}
                            onTouchStart={() => handleMouseDown(item.id)}
                            onTouchEnd={handleMouseUp}
                            
                            >
                                <CartItem goods={item} add={handleAdd} reduce={handleReduce} />
                            </li>
                        })}
                    </ul>
                    <Modal 
                    width={200}
                    visible={deleteModalVisible}
                    cancelText="取消"
                    okText="确认"
                    onCancel={() => {updateDeleteModalVisible(false)}}
                    onOk={handleDelete}
                    >
                        <p>确认删除?</p>
                    </Modal>
                </div>

                :
                <div className="noGoods">

                    <div className="tips">购物车为空</div>
                    <Button type="primary" onClick={() => {props.history.push("/")}}>去购物</Button>
                </div>
        }
    </div>
}

export default connect(
    state => ({
        cart: state.cart,
        
    }),
    {
        remove: createGoodsRemove,
        add: createGoodsIncrement,
        reduce: createGoodsDecrement,
    }
)(Cart)